<template>
  <div>
    <el-col :span="4">
      <el-button type="primary" @click="add">新增学习卡</el-button>
    </el-col>

    <el-table border style="width: 100%" :data="list">
      <el-table-column prop="name" label="学习卡批次名称"> </el-table-column>
      <el-table-column prop="courses" label="学习卡内容"> </el-table-column>
      <el-table-column prop="price" label="面额"> </el-table-column>
      <el-table-column prop="expired_at" label="失效日期"
        ><template slot-scope="scope">
          {{ scope.row.expired_at | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="card_number" label="使用/发放"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <el-button type="text" size="small">导出</el-button>
        <el-button type="text" size="small">查看</el-button>
        <el-button type="text" size="small">停用</el-button>
        <el-button type="text" size="small">兑换记录</el-button>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="0"
      >
      </el-pagination>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { studyCard } from '../../api'
export default {
  data() {
    return {
      currentPage4: '',
      list: []
    }
  },
  created() {},
  mounted() {
    studyCard().then(res => {
      console.log(res)
      this.list = res.data.list
    })
  },
  methods: {
    // 添加商品
    add() {
      this.$router.push({ name: 'edit' })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    sizechange(val) {
      console.log(val)
      this.pagesize = val
    },

    pagechange(val) {
      console.log(val)
      this.pagenum = val
    }
  },
  computed: {}
}
</script>

<style scoped>
</style>
